<template>
  <div class="screen-wrapper">
    <div class="screen">
      <!-- 顶部栏 -->
      <header class="topbar">
        <div class="topbar-left">
          <div class="brand">
            MALL · 智慧电商大屏
          </div>

          <div
            class="env-pill"
            :title="envTip"
          >
            <span
              class="dot"
              :class="envClass"
            />
            {{ envLabel }}
          </div>
        </div>

        <div class="topbar-center">
          <div class="clock">
            {{ nowStr }}
          </div>
        </div>

        <div class="topbar-right">
          <div class="kpis">
            <div class="kpi">
              <div class="kpi-label">
                今日GMV
              </div>
              <div class="kpi-value">
                ¥{{ formatNum(metrics.todayGMV) }}
              </div>
              <div
                class="kpi-sub"
                :class="{ up: metrics.gmvWow >= 0, down: metrics.gmvWow < 0 }"
              >
                环比 {{ (metrics.gmvWow * 100).toFixed(1) }}%
              </div>
            </div>

            <div class="kpi">
              <div class="kpi-label">
                实时订单
              </div>
              <div class="kpi-value">
                {{ formatNum(metrics.liveOrders) }}
              </div>
              <div class="kpi-sub">
                转化 {{ (metrics.conversion * 100).toFixed(2) }}%
              </div>
            </div>

            <div class="kpi">
              <div class="kpi-label">
                在线用户
              </div>
              <div class="kpi-value">
                {{ formatNum(metrics.onlineUsers) }}
              </div>
              <div class="kpi-sub">
                客单价 ¥{{ Math.round(metrics.aov) }}
              </div>
            </div>
          </div>

          <div class="actions">
            <button
              class="btn"
              @click="toggleTheme"
            >
              {{ themeLabel }}
            </button>

            <button
              class="btn"
              @click="toggleFullscreen"
            >
              {{ isFullscreen ? '退出全屏' : '全屏' }}
            </button>
          </div>
        </div>
      </header>

      <!-- 主体网格 -->
      <main class="grid">
        <section
          ref="salesTrendRef"
          class="panel span-2"
        >
          <div class="panel-title">
            近24小时GMV与订单趋势
          </div>
          <div class="chart" />
        </section>

        <section
          ref="conversionGaugeRef"
          class="panel"
        >
          <div class="panel-title">
            实时转化率
          </div>
          <div class="chart" />
        </section>

        <section
          ref="funnelsRef"
          class="panel"
        >
          <div class="panel-title">
            下单漏斗
          </div>
          <div class="chart" />
        </section>

        <section
          ref="categoryBarRef"
          class="panel"
        >
          <div class="panel-title">
            品类销售额Top10
          </div>
          <div class="chart" />
        </section>

        <section
          ref="paymentPieRef"
          class="panel"
        >
          <div class="panel-title">
            支付方式占比
          </div>
          <div class="chart" />
        </section>

        <section
          ref="heatRef"
          class="panel"
        >
          <div class="panel-title">
            时段 × 渠道 热力
          </div>
          <div class="chart" />
        </section>

        <section class="panel span-2">
          <div class="panel-title">
            热销Sku排行榜
          </div>

          <div class="table">
            <div class="thead">
              <span>#</span>
              <span>SKU名称</span>
              <span>类目</span>
              <span>销量</span>
              <span>销售额</span>
              <span>转化率</span>
            </div>

            <div class="tbody">
              <div
                v-for="(r, i) in topSkus"
                :key="r.id"
                class="row"
              >
                <span>{{ i + 1 }}</span>
                <span class="sku">{{ r.name }}</span>
                <span>{{ r.cat }}</span>
                <span>{{ formatNum(r.qty) }}</span>
                <span>¥{{ formatNum(r.amount) }}</span>
                <span>{{ (r.cv * 100).toFixed(2) }}%</span>
              </div>
            </div>
          </div>
        </section>

        <section class="panel">
          <div class="panel-title">
            最新订单
          </div>

          <div
            class="ticker"
            @mouseenter="pauseTicker"
            @mouseleave="resumeTicker"
          >
            <div
              class="ticker-inner"
              :style="{ transform: `translateY(-${tickerOffset}px)` }"
            >
              <div
                v-for="o in orders"
                :key="o.id"
                class="tick"
              >
                <span class="badge">{{ o.channel }}</span>
                <span class="user">{{ o.user }}</span>
                <span class="sku">{{ o.sku }}</span>
                <span class="price">¥{{ o.amount }}</span>
                <span class="time">{{ o.time }}</span>
              </div>

              <!-- 复制一份形成无缝滚动 -->
              <div
                v-for="o in orders"
                :key="`dup-${o.id}`"
                class="tick"
              >
                <span class="badge">{{ o.channel }}</span>
                <span class="user">{{ o.user }}</span>
                <span class="sku">{{ o.sku }}</span>
                <span class="price">¥{{ o.amount }}</span>
                <span class="time">{{ o.time }}</span>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer class="bottombar">
        <div class="status">
          <span class="pill ok">
            API {{ apiHealthy ? '正常' : '异常' }}
          </span>
          <span class="pill warn">
            Redis {{ redisHealthy ? '正常' : '异常' }}
          </span>
          <span class="pill info">
            版本 {{ version }}
          </span>
        </div>

        <div class="copyright">
          © 2025 Mall4j 智慧运营中心
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  onBeforeUnmount,
  ref,
  reactive,
  computed
} from 'vue'
import * as echarts from 'echarts'

/* ====== 响应式：流式布局 + 自适配字体/间距 ====== */
const bg = 'radial-gradient(1200px 700px at 70% -10%, #14203d 0%, #0b1221 60%, #070d19 100%)'

/* ====== 顶部信息 ====== */
const nowStr = ref('')

function tickClock () {
  const d = new Date()
  const pad = (n) => String(n).padStart(2, '0')
  nowStr.value = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

const version = 'v1.0.1'
const env = (import.meta && import.meta.env && import.meta.env.MODE) ? import.meta.env.MODE : 'prod'
const envMap = { dev: '开发', test: '测试', staging: '预发', prod: '生产' }
const envLabel = envMap[env] || env

const envClass = computed(() => {
  const map = { dev: 'dev', test: 'test', staging: 'staging', prod: 'prod' }
  return map[env] || 'prod'
})

const envTip = '当前运行环境，来自 import.meta.env.MODE'

/* ====== 健康状态（可替换为真实探活） ====== */
const apiHealthy = ref(true)
const redisHealthy = ref(true)

/* ====== 核心指标（可对接你后端 /api/dashboard） ====== */
const metrics = reactive({
  todayGMV: 1268345,
  gmvWow: 0.132,
  liveOrders: 482,
  conversion: 0.0285,
  onlineUsers: 3921,
  aov: 263.4
})

/* ====== 主题 & 全屏 ====== */
const theme = ref(localStorage.getItem('mall_theme') || 'bluePurple')
const themeLabel = computed(() => (theme.value === 'bluePurple' ? '主题：蓝紫' : '主题：蓝青'))
const isFullscreen = ref(false)

function applyTheme () {
  const map = {
    bluePurple: 'radial-gradient(1200px 700px at 70% -10%, #14203d 0%, #0b1221 60%, #070d19 100%)',
    blueCyan: 'radial-gradient(1200px 700px at 70% -10%, #0f2433 0%, #081a22 60%, #05131b 100%)'
  }
  const bgv = map[theme.value] || map.bluePurple
  document.documentElement.style.setProperty('--app-bg', bgv)
}

function toggleTheme () {
  theme.value = theme.value === 'bluePurple' ? 'blueCyan' : 'bluePurple'
  localStorage.setItem('mall_theme', theme.value)
  applyTheme()
}

function toggleFullscreen () {
  const doc = document
  const de = doc.documentElement
  if (!doc.fullscreenElement) {
    de.requestFullscreen().catch(() => { })
  } else {
    doc.exitFullscreen().catch(() => { })
  }
}

function onFsChange () {
  const doc = document
  isFullscreen.value = !!doc.fullscreenElement
}

/* ====== 榜单与订单跑马灯（mock） ====== */
const topSkus = ref([
  { id: 1, name: '氮化镓快充 65W', cat: '数码配件', qty: 3821, amount: 456230, cv: 0.042 },
  { id: 2, name: '降噪蓝牙耳机 Pro', cat: '音频设备', qty: 3212, amount: 987654, cv: 0.051 },
  { id: 3, name: '智能台灯', cat: '家居家装', qty: 2980, amount: 312450, cv: 0.033 },
  { id: 4, name: '空气炸锅 4L', cat: '厨电', qty: 2654, amount: 498000, cv: 0.028 },
  { id: 5, name: '运动手环 7', cat: '智能穿戴', qty: 2544, amount: 389210, cv: 0.039 },
  { id: 6, name: '便携显示器 15.6"', cat: '办公', qty: 2261, amount: 429800, cv: 0.026 },
  { id: 7, name: '咖啡机 半自动', cat: '厨电', qty: 2188, amount: 538020, cv: 0.024 },
  { id: 8, name: '电动牙刷', cat: '个护', qty: 2090, amount: 199320, cv: 0.035 },
  { id: 9, name: '机械键盘 87键', cat: '外设', qty: 1988, amount: 289000, cv: 0.032 },
  { id: 10, name: '宠物智能饮水机', cat: '宠物', qty: 1872, amount: 220880, cv: 0.031 }
])

const orders = ref(
  Array.from({ length: 30 }).map((_, i) => {
    const channels = ['H5', '小程序', 'APP', 'PC']
    const users = ['*伟', '小*', 'Z*', 'Lin*', '周*', '王*', '顾*']
    const skus = ['耳机Pro', '65W充电器', '空气炸锅', '运动手环', '机械键盘', '电动牙刷']
    const channel = channels[Math.floor(Math.random() * channels.length)]
    const user = users[Math.floor(Math.random() * users.length)]
    const sku = skus[Math.floor(Math.random() * skus.length)]
    const amount = 50 + Math.floor(Math.random() * 500)
    const time = new Date(Date.now() - Math.random() * 3600000)
      .toLocaleTimeString('zh-CN', { hour12: false })
    return { id: i + 1, channel, user, sku, amount, time }
  })
)

/* ====== 跑马灯 ====== */
const tickerOffset = ref(0)
let rafId = null
let isTickerPaused = false
const rowH = 32

function loopTicker () {
  if (isTickerPaused) {
    rafId = requestAnimationFrame(loopTicker)
    return
  }
  tickerOffset.value += 0.4
  const max = rowH * orders.value.length
  if (tickerOffset.value >= max) {
    tickerOffset.value = 0
  }
  rafId = requestAnimationFrame(loopTicker)
}

function pauseTicker () {
  isTickerPaused = true
}

function resumeTicker () {
  isTickerPaused = false
}

/* ====== ECharts ====== */
const salesTrendRef = ref(null)
const conversionGaugeRef = ref(null)
const funnelsRef = ref(null)
const categoryBarRef = ref(null)
const paymentPieRef = ref(null)
const heatRef = ref(null)

const charts = {}
let ro = null

function initCharts () {
  const pick = (el) => (el ? el.querySelector('.chart') : null)
  const make = (el) => {
    const dom = pick(el)
    return dom ? echarts.init(dom) : null
  }

  charts.sales = make(salesTrendRef.value)
  charts.gauge = make(conversionGaugeRef.value)
  charts.funnel = make(funnelsRef.value)
  charts.bar = make(categoryBarRef.value)
  charts.pie = make(paymentPieRef.value)
  charts.heat = make(heatRef.value)

  renderAll()

  ro = new ResizeObserver(() => {
    Object.values(charts).forEach((ch) => ch && ch.resize && ch.resize())
  })

  const screenEl = document.querySelector('.screen')
  if (screenEl) {
    ro.observe(screenEl)
  }
}

function renderAll () {
  if (!charts.sales || !charts.gauge || !charts.funnel || !charts.bar || !charts.pie || !charts.heat) {
    return
  }

  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
  const gmv = hours.map(() => Math.round(20000 + Math.random() * 40000))
  const ord = hours.map(() => Math.round(40 + Math.random() * 140))

  charts.sales.setOption({
    backgroundColor: 'transparent',
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    tooltip: { trigger: 'axis' },
    legend: { data: ['GMV', '订单量'], textStyle: { color: '#cfe7ff' } },
    xAxis: {
      type: 'category',
      data: hours,
      axisLine: { lineStyle: { color: '#375' } },
      axisLabel: { color: '#9bb0d3' }
    },
    yAxis: [
      {
        type: 'value',
        name: 'GMV',
        axisLabel: { color: '#9bb0d3' },
        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.06)' } }
      },
      {
        type: 'value',
        name: '订单',
        axisLabel: { color: '#9bb0d3' },
        splitLine: { show: false }
      }
    ],
    series: [
      { name: 'GMV', type: 'line', smooth: true, areaStyle: { opacity: 0.2 }, emphasis: { focus: 'series' }, data: gmv },
      { name: '订单量', type: 'bar', yAxisIndex: 1, barWidth: 10, data: ord }
    ]
  })

  charts.gauge.setOption({
    backgroundColor: 'transparent',
    tooltip: { formatter: '{a}<br/>{b}: {c}%' },
    series: [
      {
        type: 'gauge',
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        axisLine: { lineStyle: { width: 10 } },
        pointer: { width: 4 },
        detail: { valueAnimation: true, formatter: '{value}%', color: '#dfe6ff', fontSize: 24 },
        title: { offsetCenter: [0, '75%'], color: '#9bb0d3' },
        data: [
          { value: Number((metrics.conversion * 100).toFixed(2)), name: '转化率' }
        ]
      }
    ]
  })

  const cats = ['手机', '电脑', '家电', '家居', '个护', '母婴', '宠物', '运动', '服饰', '美妆']
  charts.bar.setOption({
    backgroundColor: 'transparent',
    grid: { left: 80, right: 20, top: 30, bottom: 20 },
    xAxis: {
      type: 'value',
      axisLabel: { color: '#9bb0d3' },
      splitLine: { lineStyle: { color: 'rgba(255,255,255,0.06)' } }
    },
    yAxis: {
      type: 'category',
      data: cats,
      axisLabel: { color: '#cfe7ff' }
    },
    series: [
      {
        type: 'bar',
        data: cats.map(() => Math.round(20 + Math.random() * 120) * 1000),
        barWidth: 12,
        label: { show: true, position: 'right', color: '#cfe7ff' }
      }
    ]
  })

  charts.pie.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'item' },
    legend: { bottom: 0, textStyle: { color: '#9bb0d3' } },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: { color: '#cfe7ff' },
        data: [
          { value: 56, name: '微信支付' },
          { value: 24, name: '支付宝' },
          { value: 14, name: '银行卡' },
          { value: 6, name: '余额/现金券' }
        ]
      }
    ]
  })

  const hours2 = Array.from({ length: 24 }, (_, i) => `${i}:00`)
  const channels = ['H5', '小程序', 'APP', 'PC']
  const heatData = []

  channels.forEach((c, ci) => {
    hours2.forEach((h, hi) => {
      heatData.push([hi, ci, Math.round(Math.random() * 200)])
    })
  })

  charts.heat.setOption({
    tooltip: {},
    grid: { left: 50, right: 30, top: 30, bottom: 40 },
    xAxis: {
      type: 'category',
      data: hours2,
      splitArea: { show: true },
      axisLabel: { color: '#9bb0d3', interval: 2 }
    },
    yAxis: {
      type: 'category',
      data: channels,
      splitArea: { show: true },
      axisLabel: { color: '#9bb0d3' }
    },
    visualMap: {
      min: 0,
      max: 200,
      calculable: true,
      orient: 'vertical',
      right: 0,
      top: 'center',
      textStyle: { color: '#9bb0d3' }
    },
    series: [
      {
        type: 'heatmap',
        data: heatData,
        label: { show: false },
        emphasis: {
          itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' }
        }
      }
    ]
  })
}

/* ====== 模拟实时数据推送（可替换为 WebSocket） ====== */
let liveTimer = null

function startLive () {
  if (liveTimer) {
    clearInterval(liveTimer)
  }

  liveTimer = setInterval(() => {
    metrics.liveOrders += Math.round(Math.random() * 5)
    metrics.onlineUsers += Math.round((Math.random() - 0.5) * 50)
    metrics.todayGMV += Math.round(Math.random() * 3000)

    const next = metrics.conversion + (Math.random() - 0.5) * 0.002
    metrics.conversion = Math.max(0.01, Math.min(0.08, next))

    if (charts.gauge) {
      charts.gauge.setOption({
        series: [
          {
            data: [
              {
                value: Number((metrics.conversion * 100).toFixed(2)),
                name: '转化率'
              }
            ]
          }
        ]
      })
    }
  }, 2000)
}

function stopLive () {
  if (liveTimer) {
    clearInterval(liveTimer)
  }
}

/* ====== 工具 ====== */
function formatNum (n) {
  return (n && typeof n.toLocaleString === 'function') ? n.toLocaleString('zh-CN') : String(n)
}

/* ====== 生命周期 ====== */
let clockId = null

onMounted(() => {
  document.documentElement.style.setProperty('--app-bg', bg)
  applyTheme()
  tickClock()
  clockId = setInterval(tickClock, 1000)
  initCharts()
  startLive()
  resumeTicker()
  rafId = requestAnimationFrame(loopTicker)
  document.addEventListener('fullscreenchange', onFsChange)
})

onBeforeUnmount(() => {
  if (clockId) clearInterval(clockId)
  stopLive()
  if (rafId) cancelAnimationFrame(rafId)
  if (ro) ro.disconnect()
  document.removeEventListener('fullscreenchange', onFsChange)
  Object.values(charts).forEach((ch) => ch && ch.dispose && ch.dispose())
})
</script>

<style scoped>
/* ====== 页面容器（允许整页滚动） ====== */
.screen-wrapper {
  min-height: 100vh;
  padding: clamp(8px, 1.5vw, 16px);
  background: var(--app-bg);
}

/* ====== 响应式主面板（流式宽度，不固定 1920×1080） ====== */
.screen {
  margin: 0 auto;
  max-width: 1600px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(8px, 1vw, 16px);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-radius: 16px;
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  position: sticky;
  /* 顶部吸附，滚动时保持在视口顶部 */
  top: 0;
  z-index: 5;
  backdrop-filter: blur(6px);
}

.topbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand {
  font-weight: 700;
  letter-spacing: 1px;
  color: #e6f0ff;
  font-size: clamp(16px, 1.5vw, 20px);
}

.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #cfe7ff;
  font-size: 12px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c6cff;
  box-shadow: 0 0 8px currentColor;
}

.dot.dev {
  background: #ffb703;
}

.dot.test {
  background: #06d6a0;
}

.dot.staging {
  background: #118ab2;
}

.dot.prod {
  background: #00d4ff;
}

.topbar-center {
  display: flex;
  justify-content: center;
}

.clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  color: #a6c8ff;
  letter-spacing: 1px;
  font-size: clamp(12px, 1.3vw, 16px);
}

.topbar-right {
  display: flex;
  justify-content: flex-end;
  gap: clamp(8px, 1vw, 16px);
  align-items: center;
  flex-wrap: wrap;
}

.kpis {
  display: flex;
  gap: clamp(8px, 1vw, 16px);
  flex-wrap: wrap;
}

.kpi {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 12px;
  min-width: 160px;
}

.kpi-label {
  font-size: 12px;
  color: #9bb0d3;
}

.kpi-value {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  margin-top: 6px;
  color: #e7f2ff;
}

.kpi-sub {
  font-size: 12px;
  margin-top: 4px;
  color: #9bb0d3;
}

.kpi-sub.up {
  color: #14f195;
}

.kpi-sub.down {
  color: #ff6b6b;
}

/* ====== 自适应网格：在小屏改为 1列/2列 ====== */
.actions {
  display: flex;
  gap: 8px;
}

.btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe7ff;
  cursor: pointer;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(260px, 32vh);
  gap: clamp(8px, 1vw, 12px);
}

/* 三列布局（≥ 1200px） */
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-rows: 34px 1fr;
  overflow: hidden;
  grid-column: span 4;
}

.panel .panel-title {
  color: #cfe7ff;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.panel .chart {
  width: 100%;
  height: 100%;
}

.span-2 {
  grid-column: span 8;
}

/* 中屏（≥ 900px 且 < 1200px）两列 */
@media (max-width: 1199px) {
  .panel {
    grid-column: span 6;
  }

  .span-2 {
    grid-column: span 12;
  }
}

/* 小屏（< 900px）单列 */
@media (max-width: 899px) {

  .panel,
  .span-2 {
    grid-column: span 12;
  }
}

/* ====== 表格 / 跑马灯 ====== */
.table {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.table .thead,
.table .row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 100px 120px 100px;
  column-gap: 12px;
  align-items: center;
  padding: 6px 10px;
}

.table .thead {
  background: rgba(255, 255, 255, 0.06);
  color: #9bb0d3;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table .tbody {
  overflow: auto;
}

.table .row {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  color: #eaf2ff;
  font-size: 13px;
}

.table .row .sku {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticker {
  position: relative;
  height: calc(100% - 34px);
  overflow: hidden;
}

.ticker-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.tick {
  height: 32px;
  display: grid;
  grid-template-columns: 70px 1fr 1fr 80px 120px;
  align-items: center;
  padding: 0 10px;
  color: #eaf2ff;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.tick .badge {
  font-size: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: #a6f6ff;
  padding: 2px 6px;
  border-radius: 6px;
  justify-self: start;
}

.tick .user {
  color: #9bb0d3;
}

.tick .sku {
  color: #cfe7ff;
}

.tick .price {
  color: #14f195;
  font-weight: 600;
}

.tick .time {
  color: #9bb0d3;
  justify-self: end;
}

/* ====== 底部栏 ====== */
.bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9bb0d3;
  font-size: 12px;
  margin-top: clamp(8px, 1vw, 12px);
}

.status {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pill.ok {
  border-color: rgba(20, 241, 149, 0.5);
}

.pill.warn {
  border-color: rgba(255, 209, 102, 0.5);
}

.pill.info {
  border-color: rgba(0, 212, 255, 0.5);
}

/* ====== 滚动条优化 ====== */
.table .tbody::-webkit-scrollbar {
  width: 6px;
}

.table .tbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

</style>
